<template>
    <div class="page">
        <header class="header">
            <h1 class="title">3D 商品展示中心</h1>
            <p class="subtitle">精选商品，通过沉浸式 3D 体验感受产品的每一个细节</p>
        </header>

        <main class="content">
            <section class="viewer">
                <ModelViewer :modelUrl="goodDetail.modelUrl" :previewImage="goodDetail.image" :key="currentId"
                    :background="'#2d2d2d'" />
            </section>

            <aside class="sidebar">
                <div class="section-title">精选商品</div>

                <div class="product-grid">
                    <div v-for="good in goodList" :key="good.id" class="product-card"
                        :class="{ 'is-active': good.id === currentId }" @click="selectGood(good)">
                        <div class="thumb" style="background:#f1c5e6;"><img :src="good.image" alt="" />
                        </div>
                        <div class="meta">
                            <div class="name">{{ good.type }}</div>
                            <div class="price">¥ {{ good.price }}</div>
                        </div>
                    </div>
                </div>

                <div class="detail-card">
                    <div class="detail-top">
                        <div class="detail-name">{{ goodDetail.name }}</div>
                        <div class="detail-price">¥ {{ goodDetail.price }}</div>
                    </div>
                    <div class="detail-sub">{{ goodDetail.summary }}</div>

                    <div class="features">
                        <div class="feature" v-for="item in goodDetail.description"><span class="dot"></span>{{ item }}
                        </div>
                    </div>

                    <div class="detail-actions">
                        <button class="btn-primary">加入购物车</button>
                        <button class="btn-like">❤</button>
                    </div>
                </div>
            </aside>
        </main>
    </div>

</template>

<script setup>
import { ref, computed } from 'vue';
import ModelViewer from '../components/ModelViewer.vue';
import { goodList } from '../mock/Goods.js';

const currentId = ref(goodList[0].id);

const selectGood = (row) => {
    currentId.value = row.id;
};

const goodDetail = computed(() => {
    // 从 goodList 中找到 id 匹配的商品
    const good = goodList.find(item => item.id === currentId.value);
    // 如果找到了，返回该商品；如果没找到（比如数据加载中），返回一个默认对象
    return good;
});

</script>

<style scoped lang="less">
@bg: #0b1220;
@card: #0f172a;
@text: #e8eefc;
@muted: #9fb1d1;

.page {
    min-height: 100vh;
    background: @bg;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .header {
        text-align: center;
        margin-bottom: 12px;

        .title {
            font-size: 26px;
            font-weight: 800;
            color: @text;
        }

        .subtitle {
            margin-top: 6px;
            font-size: 13px;
            color: @muted;
        }
    }

    .content {
        margin-top: 24px;
        display: flex;
        gap: 16px;
        align-items: flex-start;

        .viewer {
            width: 700px;
            height: 500px;
            flex: 1 1 auto;
            background: @card;
            border-radius: 12px;
            padding: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
        }

        .sidebar {
            width: 400px;
            background: darken(@card, 2%);
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .3);

            .section-title {
                font-weight: 700;
                color: lighten(@text, 6%);
                margin-bottom: 10px;
            }

            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;

                .product-card {
                    background: @card;
                    border-radius: 10px;
                    padding: 8px;
                    display: grid;
                    grid-template-columns: 64px 1fr;
                    gap: 10px;
                    align-items: center;
                    border: 1px solid rgba(255, 255, 255, .05);
                    cursor: pointer;

                    &.is-active {
                        outline: 2px solid #5b7cff;
                        outline-offset: -2px;
                    }

                    .thumb {
                        width: 64px;
                        height: 64px;
                        border-radius: 8px;
                        display: grid;
                        place-items: center;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .meta {
                        .name {
                            font-weight: 700;
                            color: #e5e9f5;
                        }

                        .price {
                            margin-top: 2px;
                            font-size: 12px;
                            color: @muted;
                        }
                    }
                }
            }

            .detail-card {
                margin-top: 12px;
                background: @card;
                border: 1px solid rgba(255, 255, 255, .06);
                border-radius: 10px;
                padding: 12px;

                .detail-top {
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                }

                .detail-name {
                    font-weight: 800;
                    color: #dfe8ff;
                }

                .detail-price {
                    color: #a9c4ff;
                    font-weight: 800;
                }

                .detail-sub {
                    margin-top: 6px;
                    color: @muted;
                    font-size: 12px;
                }

                .features {
                    margin-top: 10px;
                    display: grid;
                    gap: 6px;
                }

                .feature {
                    font-size: 13px;
                    color: #d2dcf8;
                    display: flex;
                    align-items: center;
                }

                .dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #22c55e;
                    margin-right: 8px;
                    box-shadow: 0 0 0 2px rgba(34, 197, 94, .2);
                }

                .detail-actions {
                    margin-top: 12px;
                    display: flex;
                    gap: 8px;
                }

                .btn-primary {
                    flex: 1;
                    height: 38px;
                    border: none;
                    border-radius: 10px;
                    color: #eaf0ff;
                    background: linear-gradient(90deg, #4f46e5, #22c55e);
                }

                .btn-like {
                    width: 42px;
                    height: 38px;
                    border-radius: 10px;
                    border: 1px solid rgba(255, 255, 255, .08);
                    background: @bg;
                    color: #e5e7eb;
                }
            }
        }
    }

}

/* 手机端适配：右侧区域下移到下一行 */
@media (max-width: 768px) {
    .page {
        .content {
            flex-direction: column;
            gap: 12px;
        }

        .content .viewer {
            padding: 10px;
            width: 90vw;
            height: 80vw;
        }

        .content .sidebar {
            width: 100%;
        }
    }
}
</style>